<template>
	<view>
		<view class="top">
			<view class="top_ju">
				<!-- <image src="@/static/img/position.png" class="position"></image> -->
				<!-- <view class="label">{{ city }}</view> -->
				<!-- <image src="@/static/img/sanjiao.png" class="sanjiao"></image> -->
			</view>
		</view>

		<image :src="banner.image_input" class="bg" mode="widthFix"></image>

	</view>

</template>

<script>
import QQMapWX from "@/common/qqmap-wx-jssdk.min.js"
import {
	map,
	// mapbbanner
} from "@/api/map";
import {
	mapbbanner,
	GetNewOpenid
} from "@/api/redwxuser";
import { silenceAuth } from '@/api/user'
import { mapState, mapMutations } from 'vuex'

export default {
	components: {

	},
	props: {

		type: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			latitude: 0,
			longitude: 0,
			address_component: {

			},
			city: '',
			banner: {
				// image_input: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
				image_input: ""
			},
			domain: this.$config.HTTP_REQUEST_URL,
		}

	},
	mounted() {
		// uni.getLocation({
		// 	type: 'wgs84',
		// 	success: (res) => {
		// 		this.latitude = res.latitude
		// 		this.longitude = res.longitude
		// 		this.getAddress(this.latitude, this.longitude); // 根据经纬度获取地址信息
		// 		// this.mapbbanner(this.latitude, this.longitude);

		// 	}
		// });
		this.getBanner();
		this.getOpenId();
	},
	setup() {
		// const userStore = useUserStore()
		// return {
		// 	userStore
		// }
	},
	computed: {
		...mapState('user', ['openid'])
	},
	methods: {
		...mapMutations('user', ['SET_OPENID', 'SET_USERINFO', 'SET_TOKEN']),
		getOpenId() {
			debugger;
			wx.login({
				success: (res) => {
					// console.log('wx.login success:', res)
					var code = res.code;

					GetNewOpenid({
						code: code
					})
						.then(res => {
							if (res?.remark) {
								// console.log('Setting openid:', res.data)
								this.SET_OPENID(res.remark);
								this.SET_USERINFO(res.data);
								

								// 验证是否设置成功
								console.log('Current Vuex state:', this.$store.state.user.openid)
							}
						})
						.catch(err => {
							console.error('获取openid失败:', err)
							uni.showToast({
								title: '登录失败，请重试',
								icon: 'none'
							})
						})
				}
			});
		},
		getBanner() {

			mapbbanner({
				openid: this.$store.state.user.openid
			})
				.then(res => {
					if (res != null) {
						let image_url = `${this.domain}${res.data.image_url}`;
						this.banner.image_input = image_url;
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		mapbbanner(latitude, longitude) {
			let type = this.type
			mapbbanner({
				longitude,
				latitude,
				type
			})
				.then(res => {
					this.banner = res.data

				})
				.catch(res => {

				});

		},
		getAddress(latitude, longitude) {

			map({
				longitude,
				latitude
			})
				.then(res => {

					if (res.data.status == "1") {
						const addressComponent = res.data.regeocode.addressComponent;
						this.city = addressComponent.city
					} else {
						console.error('获取位置信息失败：', res.data);
					}
				})
				.catch(res => {

				});



		}
	}

}
</script>

<style scoped>
.sanjiao {
	width: 20upx;
	height: 12upx;
	margin-left: 3%;
}

.label {
	color: #FCF9F9;
}

.top {
	background-color: #FC0000;
	width: 100%;
	height: 130upx;
	display: flex;
	align-items: center;
}

.top_ju {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.position {
	width: 30upx;
	height: 35upx;
	margin-right: 3%;
}

.bg {
	width: 90%;
	margin: 0 auto;
	display: block;
	border-radius: 10upx;
	margin-top: 3%;
}
</style>